<template>
  <section class="content">
  <div class="pop-out-content">
    <!--名称-->
    <div class="title-name">
      <p class="name" style="font-size:16px;">同步日志详情</p>
    </div>
    <div class="content-desc">
      <div class="button-box">
        <el-button type="primary" @click="downDetail">导出</el-button>
      </div>
      <el-table
        :data="detailOut"
        style="width: 100%">
        <el-table-column
          prop="channel"
          label="平台">
          <template slot-scope="scope">
            <div class="bix">
              {{handleChoseChannel(scope.row.channel)}}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="store"
          label="店铺">
        </el-table-column>
        <el-table-column
          prop="platformOrderId"
          label="订单编号">
        </el-table-column>
        <el-table-column
          prop="orderCreated"
          label="订单日期">
        </el-table-column>
        <el-table-column
          prop="extraInfo"
          label="未拉取原因">
        </el-table-column>
      </el-table>
      <div class="page-ination">
        <el-pagination
          background
          :page-size="10"
          layout="prev, pager, next"
          :current-page="pageIndex"
          @current-change="pageChange"
          :total="detailOut.length">
        </el-pagination>
      </div>
    </div>

  </div>
  </section>
</template>

<script>
  import instance from '@/api/index.js'
  export default {
    name: "logDetail",
    data(){
      return{
        dialogVisible:false,
        orderTime:[],
        synchronousshopListBtn:[],
        shopValue:null,
        page:1,
        tableData:[],
        popTotalCount:null,
        popCurrentPage:1,
        detailOut:[],
        pageIndex:1,
        detailId:'',
        logId:''

      }
    },
    methods:{
      handleGetTime(){

      },
      popSynchronousChannels() {
        let vm = this;
        this.synchronousshopListBtn = [];
        this.synchronousshopListBtn.push({id:null,name:'全部'})
        instance({
          method: 'post',
          url: 'v1/author/getAuthorShopList',
          data: {
            id: 0
          }
        }).then( (data)=> {
          if (data.data.success) {
            let result = data.data.data;
            this.synchronousshopListBtn = this.synchronousshopListBtn.concat(result);
          }
        })
      },
      /*拉取列表*/
      getDataList(){
        let param = {storeId:this.shopValue,page:this.page};
        this.orderTime.length > 1 ? Object.assign(param,{begin:this.orderTime[0],end:this.orderTime[1],}):'';
        instance({
          method: 'post',
          url: 'v1/order/log/list',
          data: param
        }).then( (data)=> {
          if (data.data.success) {
            let result = data.data.data;
            this.tableData = result.list;
            this.popTotalCount = result.pages
          }
        })
      },
      popPageChange(pageIndex){
        this.page = pageIndex;
        this.getDataList();
      },
      /*获取订单日志详情*/
      getDetailList(id){
        let api = `/v1/order/log/${id}/detail`
        this.detailId = id
        instance({
          method: 'get',
          url: api,
        }).then( (data)=> {
          if (data.data.success) {
            this.dialogVisible= true
            let result = data.data.data;
            this.detailOut = result;
          }
        })
      },
      pageChange(pageindex){
        this.pageIndex= pageindex
      },
      handleChoseChannel(flag){
        switch (flag) {
          case 1:
            return 'ebay';
            break;
          case 2:
            return 'Amazon';
            break;
          case 3:
            return 'magento';
            break;
          case 4:
            return 'other';
            break;
          default:
            return 'other'
            break;
        }
      },
      downDetail(){
        let api = `/v1/order/log/${this.detailId}/export`
        instance({
          method: 'post',
          url: api,
          responseType: 'blob'
        }).then( (data)=> {
          if (data.data) {
            let result = data;
            console.log(result)
            this.download(result);
            /*  this.dialogVisible = false;*/
          }
        })
      },
      // 下载文件
      download(data) {
        if (!data) {
          vm.$alert('下载失败！', '提示', {
            confirmButtonText: '确定',
          });
          return;
        }
        if (window.navigator.msSaveBlob) {
          // for ie 10 and later
          try {
            //let blob = new Blob([data.data], {type: "application/vnd.ms-excel"});
            let blob = new Blob([data.data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
            window.navigator.msSaveBlob(blob, '同步日志详情.xlsx');
          }
          catch (e) {
            console.log(e);
          }
        } else {
          //let blob = new Blob([data.data], {type: "application/vnd.ms-excel"});
           let blob = new Blob([data.data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
          let url = URL.createObjectURL(blob);
          let link = document.createElement('a');
          link.style.display = 'none';
          link.href = url;
          link.setAttribute('download', '同步日志详情');
          document.body.appendChild(link);
          link.click();
          URL.revokeObjectURL(url);
        }
      },
    },
    created(){
     this.logId =  this.$route.query.logId;
     this.getDetailList(this.logId)
    }
  }
</script>

<style scoped lang='less'>
  .pop-out-content{
    background:rgba(255,255,255,1);
    box-shadow:0px 2px 12px 0px rgba(0,0,0,0.06);
    border-radius:4px;
    border:1px solid rgba(228,231,237,1);
    padding-bottom: 40px;
    .title-name{
      position: relative;
      &:before{
        content: '';
        position: absolute;
        height: 62%;
        width: 1px;
        border-left: 2px solid #409EFF;
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto 0;
      }
      line-height: 43px;
      padding: 0 18px;
      .name{
        font-size:16px;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height: 43px;
        border-bottom: 1px solid #E4E7ED;

      }
    }
    .content-desc{
      padding: 20px;
    }
    .el-table{
      margin-top: 15px;
      thead{
        background-color: #F5F7FA;
        tr{
          background-color: #F5F7FA;
          th{
            background-color: #F5F7FA;
            height: 60px;
            line-height: 60px;
            text-align: center;
            padding: 0;
          }
        }
      }
      tbody{
        tr{
          td{
            text-align: center;
            .el-input{
              width: 80%;
            }
          }
        }
      }
      .input-with-select{
        width: 200px !important;
      }
    }
    .page-ination{
      text-align: right;
      margin-top: 15px;
    }
  }
</style>
